
<template>
  <!-- 特殊的表格 -->
  <div class="commonTable">
    <table>
      <tr v-for="(item,index) in myForm.headers" :key="index">
        <template v-if="item.col.length!==0">
          <td
            v-for="(item1,index1) in item.col"
            :key="index1"
            :colspan="item1.colspanCount? item1.colspanCount:''"
            :rowspan="item1.rowspanCount? item1.rowspanCount:''"
            :style="{
              'width':`calc(${item1.width}vw)`,
              'text-align':item1.align,
              'backgroundColor':item1.backgroundColor,
              'fontFamily':item1.fontFamily,
              'fontWeight':item1.fontWeight,
              'fontSize':item1.fontSize+'px',
              'lineHeight':item1.lineHeight +'px',
              'height':item1.lineHeight +'px',
              'color':item1.fontColor,
              'display':item1.display===1?'':'none',
              'border-width':'1px',
              'border-style':item1.borderColor===''?'':'solid',
              'border-color':item1.borderColor===''?'#fff':item1.borderColor,
              'border-radius':item1.borderRadius
            }"
          >
            <div v-if="item1.componentType===' ' || item1.componentType==='text' " style="height: 100%;">
              <span v-if="item1.isRequired===1" style="color:red;font-size:18px">*</span>
              <span v-if="item1.componentType==='text'">{{ item1.myValue? item1.myValue:item1.title }} </span>
            </div>
            <div v-else style="height: 100%;">
              <!--输入框 -->
              <template v-if="item1.componentType==='input'">
                <!-- <el-tooltip effect="light" :content="item1.myValue" placement="top"> -->
                <el-input
                  v-if="item1.componentType === 'input' && getFlag"
                  ref="innerOper"
                  v-model="item1.myValue"
                  :class="{'myEllipsis': item.ellipsis === '1'}"
                  :placeholder="item1.promptText || (item1.edit+''!=='0'?'请输入'+item1.title:'')"
                  :disabled="item1.edit+'' === '0'"
                  style="width: 100%;"
                  :type="item1.isNumber === 1 ? 'number' : 'string'"
                  :data-dataIndex="item1.dataIndex"
                  @mousewheel.native.prevent
                  @input="v => itemEditMark(item1, v)"
                  @keyup.native="v => inputChange(item1)"
                />
                <div v-else>
                  {{ item1.myValue }}
                </div>
                <!-- </el-tooltip> -->
              </template>
              <!-- 时间选择器 -->
              <template v-if="dataPicker(item1)">
                <el-date-picker
                  v-if="dataPicker(item1) && getFlag"
                  ref="innerOper"
                  v-model="item1.myValue"
                  :title="item1.myValue"
                  :class="{'myEllipsis': item1.ellipsis === '1'}"
                  :type="dataPicker(item1).type"
                  :disabled="item1.edit+'' === '0'"
                  style="width: 134px;"
                  :data-dataIndex="item.dataIndex"
                  :value-format="dataPicker(item1).format"
                  :placeholder="item1.promptText || ''"
                  @change="v => itemEditMark(item1, v)"
                />
                <div v-else>
                  {{ item1.myValue }}
                </div>
              </template>
              <!-- 树状下拉框 -->
              <template v-if="['treeSelect', 'treeSelectBot', 'enterpriseListTree', 'enterpriseInTree'].includes(item1.componentType)">
                <SelectTree
                  v-if="['treeSelect', 'treeSelectBot', 'enterpriseListTree', 'enterpriseInTree'].includes(item1.componentType) && getFlag"
                  :item="item1"
                  :class="{'myEllipsis': item1.ellipsis === '1'}"
                  :select-value="item1.myValue"
                  :placeholder="item1.promptText || ''"
                  @changeData="selectTreeChange"
                />
                <div v-else>
                  {{ item1.myValue }}
                </div>
              </template>
              <!-- 下拉框 -->
              <template v-if="['select', 'enterpriseIn', 'enterpriseList'].includes(item1.componentType)">
                <Select-Url
                  v-if="['select', 'enterpriseIn', 'enterpriseList'].includes(item1.componentType) && getFlag"
                  ref="selectUrl"
                  :item="item1"
                  :disabled="item1.edit+'' === '0'"
                  style="width: 100%;"
                  :class="{'myEllipsis': item1.ellipsis === '1'}"
                  :data-dataIndex="item1.dataIndex"
                  :placeholder="item1.promptText || ''"
                  :select-value="item1.myValue"
                  @change="(v) => selChange(v, item1)"
                  @changeItemOption="changeItemOption"
                />
                <div v-else>
                  {{ item1.myValue }}
                </div>
              </template>
              <template v-if="item1.componentType===&quot;text&quot;">
                <div>{{ item1.myValue }}</div>
              </template>
            </div>
          </td>
        </template>
      </tr>

    </table>
  </div>

</template>

<script>
// import { getLocalStorage, getCurrentTime } from '@/utils/commonMethods';
import SelectUrl from '@/components/CommonForm/components/SelectUrl';
import SelectTree from '@/components/CommonForm/components/SelectTree';
import { digitUppercase, getSystemVariable } from '@/utils/utils';
export default {
  name: 'CommonTable',
  components: { SelectUrl, SelectTree },

  props: {
    tableId: {
      type: Number,
      default: -1
    },
    flag: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      title: this.$route.query.title,
      myForm: {
        headers: [] // 渲染数据
      },

      formData: { } // form表单数据

    };
  },
  computed: {
    form() {
      return this.form;
    },

    getFlag() {
      if (['0', '2'].includes(this.flag)) {
        return true;
      } else {
        return false;
      }
    }
  },
  // 注入
  inject: ['form'],

  methods: {
    // 时间选择器类型
    dataPicker(item) {
      const { componentType } = item;
      const typesMap = {
        'yearDateSelect': {
          format: 'yyyy',
          type: 'year'
        },
        'monthDateSelect': {
          format: 'yyyy-MM',
          type: 'month'
        },
        'dayDateSelect': {
          format: 'yyyy-MM-dd',
          type: 'date'
        }
      };

      if (componentType in typesMap) {
        return typesMap[componentType];
      } else {
        return false;
      }
    },
    // 普通下拉框选中
    selChange(v, item) {
      // item.myValue = v[item.selectViewOptions.renderValue];
      item.myValue = v[item.selectViewOptions.renderKey];
      // 联动
      if (item.linkageFields) {
        item.linkageFields.map(link => {
          this.assignItemValue(link, v);
        });
      }
      this.itemEditMark(item, v);
    },

    // 联动赋值
    assignItemValue({ key, value: valueKey }, value) {
      // 赋值 ,表头加表体
      this.myForm.headers.map(item1 => {
        if (item1.col) {
          item1.col.map(item2 => {
            if (key === item2.dataIndex) {
              item2.editMark = true;
              item2.myValue = value[valueKey];
              this.setInnerValue(key, value[valueKey]);
            }
          });
        }
      });
      // }
    },
    // 树型下拉框选中
    selectTreeChange({ data, item }) {
      item.treeSelectItem = data;
      // 显示什么绑定什么,等提交再转换
      item.myValue = data[item.selectViewOptions.renderKey];
      // item.myValue = data[item.selectViewOptions.renderValue];
      if (item.linkageFields) {
        item.linkageFields.map(link => {
          this.assignItemValue(link, data);
        });
      }

      this.itemEditMark(item, data);
    },
    headers(data) {
      return [...data.values()];
    },
    headerMap(data) {
      const map = new Map();
      data.headers.sort((curr, next) => {
        return curr.rowNum * 1 - next.rowNum * 1;
      });
      data.headers.map(item => {
        const rowNum = item.rowNum;
        if (map.has(rowNum)) {
          if (map.get(rowNum)) {
            map.set(rowNum, [...map.get(rowNum), item]);
          }
        } else {
          map.set(rowNum, [item]);
        }
      });
      return map;
    },
    getFormDatas(arr) {
      const obj = { };
      arr.map(item => {
        if (item.col) {
          item.col.map(item1 => {
            if (this.$route.query.formGuid === '') {
              if (item1.systemVariablesName !== '') {
                // if (item1.componentType === 'dayDateSelect') {
                //   item1.myValue = getCurrentTime();
                // } else {
                //   item1.myValue = getLocalStorage(item1.systemVariablesName);
                // }
                item1.myValue = getSystemVariable(item1.systemVariablesName);
              } else {
                item1.myValue = item1.defaultValue;
              }
            }
            obj[item1.dataIndex] = item1.myValue;
          });
        }
      });
      return obj;
    },
    // 处理子项
    dealItem(data) {
      for (const key in data) {
        const item = data[key];
        if (item.componentType === 'select') {
          if (!item.focusUrl) {
            item.opintion = item.columnSelectOptions;
          }
        }
      }
    },

    initData() {
      this.myForm.headers = [];
      const data = this.form()[this.tableId];
      // 排序加分类
      const map = this.headerMap(data);
      // 处理数据，使得变成表格所需要的格式
      this.headers(map).map(o => {
        // 处理子项目
        this.dealItem(o);
        this.myForm.headers.push({
          col: o
        });
      });
      // 转化数据，只有对象的，key 和value
      this.formData = this.getFormDatas(this.myForm.headers);
    },
    // 标记被编辑过
    itemEditMark(item) {
      item.editMark = true;
    },
    inputChange(item) {
      setTimeout(() => {
        this.myForm.headers.map(item1 => {
          if (item1.col) {
            item1.col.map(item2 => {
              if (item.dataIndex === item2.upperField) {
                item2.editMark = true;
                item2.myValue = digitUppercase(item.myValue);
                this.setInnerValue(item2.dataIndex, digitUppercase(item.myValue));
              }
            });
          }
        });
        this.setInnerValue(item.dataIndex, item.myValue);
        this.$forceUpdate();
      }, 200);
    },
    // 赋值输入框、时间选择器
    setInnerValue(key, value) {
      if (key in this.formData) {
        this.formData[key] = value;
      }
    },
    changeItemOption(payload) {
      const { item, option } = payload;
      item.opintion = option;
    }
  }

};
</script>

<style lang='scss' scoped>
     td {
        text-align: center;
        padding: 5px;
        table-layout: fixed;
    }
 .commonTable/deep/.el-input__inner {
    border: none;
  }
 .commonTable/deep/ .el-input.is-disabled .el-input__inner {
    border-color: #dfe4ed;
    cursor: not-allowed;
    background-color: #fff !important;
    color:#606266
}
  .title{
    color: #fff;
    text-align: center;
    height: 35px;
    line-height: 35px;
    background-color: #015397;
    font-size: 16px;
    font-weight: bolder;
  }
  .commonTable_title{
    line-height: 40px;
    font-size: 20px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    color: rgba(0,0,0,0.85);
    line-height: 28px;
    text-align: center;
    margin-bottom: 20px;
  }
  .myEllipsis /deep/ input {
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
  table {
    border-collapse: collapse;
    border-spacing:0px;
    empty-cells:hide;
    border-top-width:0px;
  }

</style>
